<template>
  <div>
    <div class="d-flex my-1" v-for="film in films" :key="film.filmId">
      <img class="px-1 ml-2" :src="film.poster" />
      <div id="text" class="flex-fill text-left mt-2">
        <router-link class="text-secondary" :to="{ name: 'filmDetail', params: { id: film.filmId } }">
          <!-- <span class=''>{{ film.name }} </span> -->
          {{ film.name }}
        </router-link>
        <!-- <b-button size="sm" pill variant="light">{{ film.filmType.name }}</b-button> -->
        <div id="typeMark" class="d-inline font-weight-bolder border rounded-pill ">
          {{ film.filmType.name }}
        </div>

        <div class="d-flex w-100">
          <div id="description" class="mr-1 ">
            <div>
              <span>观众评分</span><span class="text-warning"> {{ film.grade }}</span>
            </div>
            <div class="text-truncate" style="width: 15rem">主演： {{ film.actors | actorsFilter }}</div>
            <span>{{ film.nation }} | {{ film.runtime }}</span>
          </div>
        </div>
      </div>
      <div class=" mr-3 mt-4">
        <b-button size="sm" variant="outline-danger" to="/center">购票</b-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
// import detail from '../../components/FilmDetail'

Vue.filter('actorsFilter', (actors) => {
  if (actors === undefined) return '暂无主演';
  return actors.map((item) => item.name).join(' ');
});
export default {
  data() {
    return {
      films: [],
    };
  },
  mounted() {
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=9895210',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16198591965838634376757249","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list',
      },
      // url: '/ajax/movieOnInfoList?token=&optimus_uuid=A72DD600AADF11EB9C7987655D9B2A369853287ECEA84997B85E41041087C26D&optimus_risk_level=71&optimus_code=10'
    }).then((res) => {
      this.films = res.data.data.films;
    });
  },
  methods: {
    clickGo(id) {
      // console.log(id);
      this.$router.push({ name: 'detail', params: { id } });
    },
  },
  setup() {},
};
</script>

<style scoped>
img {
  width: 80px;
}
#description {
  color: gray;
  font-size: 12px;
  /* width: 78%; */
}
#typeMark {
  font-size: 10px;
  color: rgb(179, 190, 199);
  border-color: rgb(179, 190, 199);
}
</style>
;
